<template>
  <div class="shouQuan_box">
    <p class="herder_text">智 城 数 创 项 目 授 权</p>
    <ul class="shouQuan_body">
      <li>项目名称： <input v-model="fromObj.name" type="text" placeholder="项目名称"></li>

      <li>开始时间：<input v-model="fromObj.start" type="text" :placeholder="placeholderStart"></li>
      <li>结束时间：<input v-model="fromObj.end" type="text" :placeholder="placeholderEnd"></li>
      <li>授权密钥：<input v-model="fromObj.key" type="text" placeholder="密钥"></li>
      <li class="button" @click="tiJiao">
        确认授权

      </li>
      <li v-if="keyStr != ''">Key: {{ keyStr }} </li>
      <!-- <li><input type="button" value="解密测试 " @click="jieMi">: {{ jieMiStr }}</li> -->
      <!-- <li><input type="button" value="Key" >: {{ jieMiStr }}</li> -->

    </ul>
  </div>
</template>

<script setup>


import CryptoJS from 'crypto-js';
import { ref, onMounted } from 'vue';
import saveJson from 'file-saver'
onMounted(()=>{
  getNianYueRi()
})
let fromObj = {
  name: '',
  start: '',
  end: '',
  key: ''
}
let jieMiStr = ref('')
let keyStr = ref('')
//提示年月
let placeholderStart = ref('')
let placeholderEnd = ref('')
// 十六位十六进制数作为密钥
const paw = CryptoJS.enc.Utf8.parse("XA_ZCSC_PA123456");
// 十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse("XA_ZCSC_IV123456");

//加密 以及 上传服务器
function tiJiao() {
  let startStr = '';
  let endStr = '';
  if (fromObj.start != '') {
    startStr = fromObj.start.replace(/\.|\>|\/|\?]/g, '-');
  }
  if (fromObj.end != '') {
    endStr = fromObj.end.replace(/\.|\>|\/|\?]/g, '-');
  }

  if (fromObj.name != '') {
    if (fromObj.start != '' && shiJianPanDuan(startStr)) {
      if (fromObj.end != '' && shiJianPanDuan(endStr)) {
        if (fromObj.key != '') {
          let objData = [{}]
          //加密项目名称
          const key = CryptoJS.enc.Utf8.parse(paw);
          const srcs = CryptoJS.enc.Utf8.parse(`${fromObj.name}${fromObj.key} + ${startStr} + ${endStr}`);
          const encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
          keyStr.value = encrypted.toString();
          objData[0].name = fromObj.name + '项目授权';
          objData[0].key = keyStr.value;
          objData = JSON.stringify(objData)
          let keyArr = new Blob([objData], { type: 'text/plain;charset=utf-8' }) 
          saveJson(keyArr, `key.json`)
        } else {
          alert('请输入key')
        }
      } else {
        alert('请输入正确的结束时间')
      }
    } else {
      alert('请输入正确的开始时间')
    }
  } else {
    alert('请输入项目名称')
  }
}

// 时间格式判断
function shiJianPanDuan(str) {
  let regu = /^((20[2-9]\d{1})|(20((0[0-9])|(1[0-8]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/;
  if (regu.test(str)) {
    return true
  } else {
    return false;
  }
}
//解密
function jieMi() {
  const key = CryptoJS.enc.Utf8.parse(paw);
  const decrypt = CryptoJS.AES.decrypt(keyStr.value, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
  jieMiStr.value = (CryptoJS.enc.Utf8.stringify(decrypt).toString())
}

//获取当前年月日
function getNianYueRi() {
  let currentDate = new Date();
  // 获取年份
  let currentYear = currentDate.getFullYear();
  // 获取月份（注意：月份范围是 0-11，所以要加1）
  let currentMonth = currentDate.getMonth() + 1;
  // 获取日期
  let currentDay = currentDate.getDate();
  let endcurrentYear = currentYear + 2;
  placeholderStart.value = `${currentYear}.${currentMonth}.${currentDay}`
  placeholderEnd.value = `${endcurrentYear}.${currentMonth}.${currentDay}`
}
</script>


<style scoped>
.shouQuan_box {
  width: 100%;
  height: 100vh;
  background-color: #ccc;
}

.herder_text {
  font-size: 36px;
  text-align: center;
  font-weight: 600;
  padding: 20px 0;
}

.shouQuan_body {
  width: 70%;
  margin: 0 auto;
  /* background-color: antiquewhite; */
  padding: 20px;
  text-align: left;
}

.shouQuan_body li {
  height: 60px;
  font-size: 28px;
  color: #000;
}

input {
  height: 36px;
  border: none;
  background-color: #ccc;
  font-size: 26px;
  color: #000;
}

input[type=text]:focus {
  outline: none;
  font-size: 26px;
}

.button {
  width: 200px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to top, #ccc, #fff);
  margin: 15px 0;
  /* color: #fff !important; */
}

.button:hover {
  background: linear-gradient(to top, #fff, #ccc);
}
</style>
